window.onload = function () {

    linkto();
      // 链接购物车   
      let shopping=document.querySelector('.shopping');
      shopping.addEventListener('click',function(){
          location.href='./shoppingCart.html'
      });

    // 二级菜单 优化 方法二
    let secendListul = document.querySelector('.nav-left ul');
    let htmllistul = '';
    for (let i = 0; i < 8; i++) {
        htmllistul += `
        <li class="list">
         <p>${i + 1}</p>
         <!-- 选项具体内容 -->
         <div class="list-content">
            <!-- 内容上方标题 -->
            <div class="list-title">
                <span>图书馆>></span>
                <span>儿童书馆>>></span>
                <span>电子书馆>></span>
            </div>
            <!-- 内容明细 -->
            <ul>
                <li>
                    <p class="fontcolor">${i + 1}</p>
                    <div></div>
                    <p>小说&emsp;&emsp; &emsp;传记 青春 动漫 艺术 摄影 明星</p>

                </li>
                <li>
                    <p class="fontcolor">22</p>
                    <div></div>
                    <p>小说 文学 传记 青春 动漫 艺术 摄影 明星</p>

                </li>
                <li>
                    <p class="fontcolor">33</p>
                    <div></div>
                    <p>小说 文学 传记 青春 动漫 艺术 摄影 明星</p>

                </li>

            </ul>
         </div>
        </li>
        `
    }
    secendListul.innerHTML = htmllistul;



    //二级菜单交互
    // 获取dom
    let menulis = document.querySelectorAll('.list');
    let menuPs = document.querySelectorAll('.list>p');
    let menulistContent = document.querySelectorAll('.list>.list-content');

    // 监听li标签 给p标签添加menu-active类名 给list-content添加show类名
    // 循环鼠标移入移出事件
    for (let i = 0; i < menuPs.length; i++) {
        menulis[i].addEventListener('mouseover', function () {
            menuPs[i].className = 'menu-active';
            menulistContent[i].className = 'list-content menu-show';
        })

        // 鼠标移出监听
        menulis[i].addEventListener('mouseout', function () {
            menuPs[i].className = '';
            menulistContent[i].className = 'list-content';
        })
    }
 
    // 电子书选项卡优化 大选项盒子里图片循环 方法3
    let bookRightcontentboxs = document.querySelectorAll('.book-rightcontentbox');
    for (let i = 0; i < bookRightcontentboxs.length; i++) {
        for(let j=0;j<6;j++){
            let div = document.createElement('div');
        div.className = 'book-other fl';
        div.innerHTML = `
        <div>
            <p class="title">奥运狂欢</p>
            <span>10万种电子书 直降40%</span>
        </div>
            <div class="book-img"></div>
        <div class="book-price clearfix">
            <p class="book-color fl">￥49</p>
            <p class="book-history-price fl">￥79</p>
        </div>
                      `;
           bookRightcontentboxs[i].appendChild(div); 
        }
        
    }


    // 链接商品详情页
    let bookleftcontentboxtops=document.querySelectorAll('.book-leftcontentbox-top');
    for(let i=0;i<bookleftcontentboxtops.length;i++){
        bookleftcontentboxtops[i].addEventListener('click',function(){
            location.href='./info.html'
        })
    }

    // 电子书选项卡左
    let bookChoices = document.querySelectorAll('.book-choice');
    let bookContents = document.querySelectorAll('.book-contentbox');

    for (let i = 0; i < bookChoices.length; i++) {
        bookChoices[i].addEventListener('mouseover', function () {
            // 先清除所有选项效果  
            for (let j = 0; j < bookChoices.length; j++) {
                bookChoices[j].className = 'book-choice  fl';
                bookContents[j].className = 'book-contentbox  clearfix';
            }
            // 再给选中的添加效果
            bookChoices[i].className = 'book-choice  fl active';
            bookContents[i].className = 'book-contentbox  clearfix show';
        })
    }
    // 电子书右 手风琴效果
    // 代码优化 方法2
    // 父节点.innerHTML=''
    let html2 = `<li class="clearfix">
    <div class="num fl">1</div>
    <div class="borderbox fl clearfix">
        <p class="fl hide">从你的全世界路过</p>
        <div class="new-ebook show fl clearfix">
            <img class="fl" src="./images/index08_05.jpg" alt="">
            <div class="newbook-info fr">从你的世界路过 入选央视“2014中国好书”的80后作品！十年华语畅销小说， 王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
            </div>
        </div>
      </div>
    </li>`;
    for (let i = 0; i < 6; i++) {
        html2 = html2 + `<li class="clearfix">
        <div class="num fl">${i + 2}</div>
        <div class="borderbox fl clearfix">
            <p class="fl">从你的全世界路过</p>
            <div class="new-ebook hide fl clearfix">
                <img class="fl" src="./images/book3.jpg" alt="">
                <div class="newbook-info fr">从你的世界路过 入选央视“2014中国好书”的80后作品！十年华语畅销小说， 王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                </div>
            </div>
        </div>
    </li>
        `;
    }
    let newbookul = document.querySelector('.newbook ul');
    newbookul.innerHTML = html2;

    let newEbooks = document.querySelectorAll('.new-ebook');
    let ps = document.querySelectorAll('.newbook .borderbox p');
    let newbookLis = document.querySelectorAll('.newbook li');
    let nums = document.querySelectorAll('.newbook  .num');

    for (let i = 0; i < newbookLis.length; i++) {
        newbookLis[i].addEventListener('mouseover', function () {
            // 先让所有p显示 图片盒子隐藏  
            for (let j = 0; j < newbookLis.length; j++) {
                newEbooks[j].className = 'new-ebook hide fl clearfix';
                ps[j].className = 'fl show';
            }
            //再让选中项 p隐藏 图片盒子显示
            newEbooks[i].className = 'new-ebook  show fl clearfix';
            ps[i].className = 'fl hide';
        })
    }
    // 让1 2 3项数字变色
    for (let j = 0; j < 3; j++) {
        nums[j].style.color = '#f60';
    }


    // 服装,户外，童装 广告背景插入
    let clothingAdvitems = document.querySelectorAll('.clothing .bottom-adv-item');
    let sportAdvitems = document.querySelectorAll('.sports .bottom-adv-item');
    let childclothingAdvitems = document.querySelectorAll('.child-clothing .bottom-adv-item');

    for (let i = 0; i < clothingAdvitems.length; i++) {
        clothingAdvitems[i].style.background = "url('../images/logo13_1" + i + ".jpg')";
        sportAdvitems[i].style.background = "url('../images/logo13_1" + i + ".jpg')";
        childclothingAdvitems[i].style.background = "url('../images/logo13_1" + i + ".jpg')";
    }

    // 推广选项 点点
    let promotionChoices = document.querySelectorAll('.top-choice-promotion');
    let promotionContents = document.querySelectorAll('.middle-content-promotion .choice');

    for (let i = 0; i < promotionChoices.length; i++) {
        promotionChoices[i].addEventListener('mouseover', function () {
            for (let j = 0; j < promotionChoices.length; j++) {
                promotionChoices[j].className = 'top-choice-promotion  fl';
                promotionContents[j].className = 'choice';
            }
            promotionChoices[i].className = 'top-choice-promotion active fl';
            promotionContents[i].className = 'choice show';
        })

    }
    // 推广选项 选项图优化
    let promotionChoicesUl=document.querySelectorAll('.choice ul');
    for (let i = 0; i < promotionChoicesUl.length; i++){
        let html='';
        for (let j = 0; j <10; j++){
            html+=`<li>
                      <div class="img"></div>
                      <div class="text">
                             <p class="text1">Pigeon法国制奶嘴，无毒天然乳胶</p>
                             <p class="price">￥:189</p>
                             <div>
                                <span class="inf">...</span> 已有
                                <span class="color">988</span> 条评价
                             </div>
                      </div>
                </li>
            `
        }
        promotionChoicesUl[i].innerHTML=html;

    }






    // 发货流程 图标
    let stepImgs = document.querySelectorAll('.step-img');
    for (let i = 1; i <= stepImgs.length; i++) {

        stepImgs[i - 1].style.background = "url('./images/222_1" + (i * 2 - 1) + ".png') no-repeat"
    }

    // go to top 图标
    let gototop = document.querySelector('.to-top');
    gototop.addEventListener('click', function () {
        let top = document.documentElement.scrollTop;
        let timer = setInterval(function () {
            top = top - 500;
            document.documentElement.scrollTop = top;
            if (top < 0) {
                clearInterval(timer)
            }
        }, 50)
    })


    // 楼层跳转
    let jumpItems = document.querySelectorAll('.jump-item');
    let jumpTexts = document.querySelectorAll('.jump-text');
    let jumplis = document.querySelectorAll('.jump li');
    let jump = document.querySelector('.jump');

    // 生成背景图标
    for (let i = 0; i < jumpItems.length; i++) {
        let offsetY = i * (-40) + 'px';
        jumpItems[i].style.background = "url('./images/floor.png') no-repeat 0 " + offsetY + "  #f2f2f2";
    }

    //   循环 干了两件事
    for (let i = 0; i < jumplis.length; i++) {

        // 事件监听鼠标移入 改变背景小图标  显示文字盒子
        jumplis[i].addEventListener('mouseover', function () {
            let offsetY = i * (-40) + 'px';
            jumpItems[i].style.background = "url('./images/floor.png') no-repeat -40px " + offsetY + "  #f2f2f2";
            jumpTexts[i].style.display = 'block';
        })

        // 鼠标移出 改变背景小图标  隐藏文字盒子
        jumplis[i].addEventListener('mouseout', function () {
            let offsetY = i * (-40) + 'px';
            jumpItems[i].style.background = "url('./images/floor.png') no-repeat 0  " + offsetY + "  #f2f2f2";
            jumpTexts[i].style.display = 'none';
        })
    }
    // 滚轮到指定位置显示楼层跳转图标
    let searchFixed = document.querySelector('.search-fixed');
    let oldInp = document.querySelector('#oldInp');
    let newInp = document.querySelector('#newInp');


    //在window监听滚轮距离  拿top变化值也要在监听时间中
    window.addEventListener('scroll', function () {
        let top = document.documentElement.scrollTop;
        if (top > 940) {
            jump.style.display = 'block'
        }
        else {
            jump.style.display = 'none'
        }

        //  固定搜索框 显示隐藏 新老按钮传值

        if (top > 500) {
            searchFixed.style.height = '50px';
            searchFixed.style.borderBottom = '1px solid #f60';
            // if(newInp.value==''){
            //      newInp.value=oldInp.value
            // }
        } else {
            searchFixed.style.height = '0';
            searchFixed.style.borderBottom = 'none';
            // if(oldInp.value!==newInp.value&&newInp.value!=''){
            //     oldInp.value= newInp.value
            //     newInp.value='' 
            // } 
        }
    })
    // 固定搜索框方法2新老按钮传值 inpu事件
    oldInp.addEventListener('input', function () {
        newInp.value = this.value
    })
    newInp.addEventListener('input', function () {
        oldInp.value = this.value
    })



    // 楼层跳转实现
    // #+id 跳转至id 中心位置 


    //鼠标移入领券中心 显示上左下
    let discont = document.querySelector('.discont');
    let discontTop = document.querySelector('.discont .top');
    let discontLeft = document.querySelector('.discont .left');
    let discontBottom = document.querySelector('.discont .bottom');
    // 移入
    discont.addEventListener('mouseover', function () {
        discontTop.style.display = 'block';
        discontLeft.style.display = 'block';
        discontBottom.style.display = 'block';
    })
    // 移出
    discont.addEventListener('mouseout', function () {
        discontTop.style.display = 'none';
        discontLeft.style.display = 'none';
        discontBottom.style.display = 'none';
    })

    let newBOOKul = this.document.querySelector('.newbookbox ul')





}